<template>
	<div class="risk">
		<div class="add" @click="add">新增</div>
		<div>
			<van-search class="info_search" v-model="value" placeholder="搜索" />
		</div>
		<van-tabs v-model="active">
			<van-tab title="风险位置">
				<van-list
					style="margin-top: 5px"
					:finished="finished"
					v-model="loading"
					finished-text="没有更多了"
					@load="onLoad"
				>
					<div class="all_dep" @click="goDepartment">
						所有部门<van-icon name="arrow-down" />
					</div>
					<div class="dep_item">
						<div class="dep_item_detail" v-for="item in list" :key="item.ID">
							<div @click="goDetail(item)">
								<div class="dep_name">{{ item.RiskUnitName || '无' }}</div>
								<div class="dep_sort">
									<img src="@/assets/Images/AppIcon/icon_list_org.png" alt="" />
									<div>部门：{{ item.OrgName || '无' }}</div>
								</div>
								<div class="dep_sort">
									<img src="@/assets/Images/AppIcon/icon_equ_type.png" alt="" />
									<div>班组：{{ item.TeamName || '无' }}</div>
								</div>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_post.png"
										alt=""
									/>
									<div>岗位：{{ item.OrgPostName || '无' }}</div>
								</div>
								<!-- <div class="dep_sort">
							<img
								src="@/assets/Images/AppIcon/icon_list_security.png"
								alt=""
							/>
							<div>风险点：{{ item.RiskPointName || '无' }}</div>
						</div> -->
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_type.png"
										alt=""
									/>
									<div>设备设施：{{ item.EquipmentName || '无' }}</div>
								</div>
								<!-- <div class="dep_sort">
							<img src="@/assets/Images/AppIcon/icon_list_type.png" alt="" />
							<div>化学品：无</div>
						</div> -->
							</div>
							<van-divider />
							<div class="dep_btm">
								<div class="btm_item" @click="goRiskLocation(item)">
									<img
										src="@/assets/Images/AppIcon/icon_list_edit.png"
										alt=""
									/>
									<div class="mr-10">编辑</div>
								</div>
								<!-- <div class="btm_item" @click="del(item)">
							<img src="@/assets/Images/AppIcon/icon_delete.png" alt="" />
							<div>删除</div>
						</div> -->
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
			<van-tab title="风险点">
				<van-list
					style="margin-top: 5px"
					:finished="finished1"
					v-model="loading"
					finished-text="没有更多了"
					@load="onLoad1"
				>
					<div>
						<!-- <div class="all_dep" @click="goDepartment">
				所有部门<van-icon name="arrow-down" />
			</div>
            <div class="all_dep" >
				所有类型<van-icon name="arrow-down" />
			</div> -->
						<van-dropdown-menu active-color="#1989fa">
							<van-dropdown-item title="所有部门" @open="goDepartment" />
							<van-dropdown-item
								title="所有类型"
								:options="typeList"
								@change="changeType"
							/>
						</van-dropdown-menu>
					</div>

					<div class="dep_item">
						<div
							class="dep_item_detail"
							v-for="(item, index) in dangerList"
							:key="item.ID"
						>
							<div @click="goDetail(item)">
								<div class="dep_name">
									{{ index + 1 }}、{{ item.RiskPointName }}
								</div>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_group.png"
										alt=""
									/>
									<div>部门：{{ item.OrgName || '无' }}</div>
								</div>
								<div class="dep_sort">
									<img src="@/assets/Images/AppIcon/icon_equ_type.png" alt="" />
									<div>类型：{{ item.RPTypeName || '无' }}</div>
								</div>
								<van-row>
									<van-col span="10">
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_post.png"
												alt=""
											/>
											<div>岗位：{{ item.OrgPostName || '无' }}</div>
										</div>
									</van-col>
									<van-col span="14">
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_date.png"
												alt=""
											/>
											<div>班组：{{ item.TeamName || '无' }}</div>
										</div>
									</van-col>
								</van-row>
								<van-row>
									<van-col>
										<div class="dep_sort">
											<img
												src="@/assets/Images/AppIcon/icon_list_equip.png"
												alt=""
											/>
											<div>设备工具：{{ item.EquipmentName || '无' }}</div>
										</div>
									</van-col>
								</van-row>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_chem.png"
										alt=""
									/>
									<div>危险介质：{{ item.ChemName || '无' }}</div>
								</div>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_danger.png"
										alt=""
									/>
									<div>职业病危害因素：{{ item.HazardName || '无' }}</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
			<van-tab title="部门/班组">
				<van-list
					style="margin-top: 5px"
					:finished="finished2"
					v-model="loading"
					finished-text="没有更多了"
					@load="onLoad2"
				>
					<div class="dep_item">
						<div
							class="dep_item_detail"
							v-for="(item, index) in userList"
							:key="index"
						>
							<div @click="goDetail(item)">
								<div class="dep_name">
									{{ item.OrgName }}
								</div>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_task.png"
										alt=""
									/>
									<div>检查表：{{ item.TNames || '无' }}</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
			<van-tab title="设备设施">
				<van-list
					style="margin-top: 5px"
					:finished="finished3"
					v-model="loading"
					finished-text="没有更多了"
					@load="onLoad3"
				>
					<div>
						<van-dropdown-menu active-color="#1989fa">
							<van-dropdown-item title="所有部门" @open="goDepartment" />
							<van-dropdown-item
								title="所有类型"
								:options="equipmentType"
								@change="changeEquipmentType"
							/>
						</van-dropdown-menu>
					</div>

					<div class="dep_item">
						<div
							class="dep_item_detail"
							v-for="(item, index) in equipmentList"
							:key="index"
						>
							<div @click="goDetail(item)">
								<div class="dep_name">
									{{ item.EquipmentName }}
								</div>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_group.png"
										alt=""
									/>
									<div>编号：{{ item.EquipmentNo || '无' }}</div>
								</div>
								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_money.png"
										alt=""
									/>
									<div>类型：{{ item.EquipmentTypeName || '无' }}</div>
								</div>

								<div class="dep_sort">
									<img
										src="@/assets/Images/AppIcon/icon_list_group.png"
										alt=""
									/>
									<div>使用部门：{{ item.OrgName || '无' }}</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { list, del } from '@/api/riskUnit'
import {
	getDepartmentUser,
} from '@/api/userOrg'
import {
		getEquEquipmentList,
	getEquipmentTypeParams,
} from '@/api/equipment'
import {
	getRiskPointTypeParams,
	getRiskPointData,

} from '@/api/riskPoint'
export default {
	data() {
		return {
			active: 0,
			loading: false,
			finished: false,
			list: [],
			activeNames: ['1'],
			border: false,
			value: '',
			filter: {
				page: 0,
				dataType: 'DangerHiddenArea',
				conditions:[{IsTemp:false,Name:"OrgCode",Operator:"\u003d",Value:""}]
			},
			typeList: [],
			filter1: {
				page: 0,
				dataType: 'DangerHiddenArea',
				conditions: [
					{ IsTemp: false, Name: 'OrgCode', Operator: '\u003d', Value: '' },
					{ IsTemp: false, Name: 'RPType', Operator: '\u003d', Value: '' },
				],
			},
			finished1: false,
			dangerList: [],
			filter2: {
				page: 0,
				dataType: 'DangerHiddenArea',
			},
			finished2: false,
			userList: [],
			finished3: false,
			filter3: {
				page: 0,
				dataType: 'DangerHiddenArea',
				conditions: [
					{
						IsTemp: false,
						Name: 'OperateOrgCode',
						Operator: '\u003d',
						Value: '',
					},
					{
						IsTemp: false,
						Name: 'EquipmentType',
						Operator: '\u003d',
						Value: '',
					},
				],
			},
			equipmentList: [],
			equipmentType: [],
		}
	},

	created() {
		this.getSiteRiskUnit()
		// 类别
		this.getRiskPointTypeParams()
		// 风险点
		this.getRiskPointData()
		// 部门
		this.getDepartmentUser()
		// 设备
		this.getEquEquipmentList()
		// 设备分类
		this.getEquipmentTypeParams()
	},
	beforeRouteLeave(to, from, next) {
		if(to.path == '/SytechDangerTakePhoto'){
            to.params.id = this.$route.params.id
		}
		if(to.path == '/SytechDangerConfirmDetail'){
            to.params.id = this.$route.params.id
		}
		
		

		next() //继续下一步
	},
	methods: {
		onLoad() {
			this.loading = true
			++this.filter.page
			list(this.filter).then((res) => {
				this.loading = false
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
		// 风险点
		onLoad1() {
			this.loading = true
			++this.filter1.page
			getRiskPointData(this.filter1)
				.then((res) => {
					this.loading = false
					this.filter1.page = res.data.PageIndex
					this.dangerList = this.dangerList.concat(res.data.Data)
					if (!res.data.HasNextPage) {
						this.finished1 = true
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onLoad2() {
			this.loading = true
			++this.filter2.page
			getDepartmentUser(this.filter2)
				.then((res) => {
					this.loading = false
					this.filter2.page = res.data.PageIndex
					this.userList = this.userList.concat(res.data.Data)
					if (!res.data.HasNextPage) {
						this.finished2 = true
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onLoad3() {
			this.loading = true
			++this.filter3.page
			getEquEquipmentList(this.filter3)
				.then((res) => {
					this.loading = false
					this.filter3.page = res.data.PageIndex
					this.equipmentList = this.userList.concat(res.data.Data)
					if (!res.data.HasNextPage) {
						this.finished3 = true
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		getSiteRiskUnit() {
			this.loading = true
			list(this.filter)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished = true
					}
					this.list = res.data.Data
					this.filter.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 风险点
		getRiskPointData() {
			this.loading = true

			getRiskPointData(this.filter1)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished1 = true
					}
					this.dangerList = res.data.Data
					this.filter1.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 获取风险点所有类别 getRiskPointTypeParams
		getRiskPointTypeParams() {
			getRiskPointTypeParams()
				.then((res) => {
					res.data.unshift({
						ID: '',
						Name: '所有类型',
					})
					res.data.forEach((item) => {
						item.text = item.Name
						item.value = item.ID
					})
					this.typeList = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 获取部门
		getDepartmentUser() {
			this.loading = true
			getDepartmentUser(this.filter2)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished2 = true
					}
					this.userList = res.data.Data
					this.filter2.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		getEquipmentTypeParams() {
			getEquipmentTypeParams()
				.then((res) => {
					res.data.unshift({
						ID: '',
						Name: '所有类型',
					})
					res.data.forEach((item) => {
						item.text = item.Name
						item.value = item.ID
					})
					this.equipmentType = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 设备设施
		getEquEquipmentList() {
			this.loading = true
			getEquEquipmentList(this.filter3)
				.then((res) => {
					this.loading = false
					if (!res.data.HasNextPage) {
						this.finished3 = true
					}
					this.equipmentList = res.data.Data
					this.filter3.page = res.data.PageIndex
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 选择部门
		goDepartment() {
			this.$router.push('/Site_RiskUnit/Department')
		},
		// 选择所有类别
		changeType(val) {
			// console.log(val, 'sasasa')
			this.filter1.conditions[1].Value = val
			this.getRiskPointData()
		},
		changeEquipmentType(val) {
			this.filter3.conditions[1].Value = val
			this.getEquEquipmentList()
		},
		add() {
			this.$router.push('/Site_RiskUnit/RiskLocation?type=add')
		},
		// 编辑风险位置
		goRiskLocation(item) {
					this.$router.push({
				name:'RiskLocation',
				params:{
					id:this.$route.params.id,
					path:this.$route.params.path,
					secondId:item.ID
				}
			})
			// this.$router.push('/Site_RiskUnit/RiskLocation?id=' + item.ID)
		},
		// 风险位置详情
		goDetail(item) {
			this.$router.push({
				name: this.$route.params.path,
				params: { list: item, id: this.$route.params.id,key: this.$route.params.key},
			})
		},
		del(item) {
			const _this = this
			const id = item.ID
			this.$dialog
				.confirm({
					title: '询问',
					message: '您确定删除本条风险位置吗？',
				})
				.then(() => {
					del({ id })
						.then((res) => {
							_this.getSiteRiskUnit()
						})
						.catch((err) => {
							console.log('err', err)
						})
				})
				.catch(() => {
					// on cancel
				})
		},
	},
}
</script>
<style lang="less" scoped>

</style>
<style lang="less">
.risk {
	height: 100vh;
	background-color: #e8f1f8;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}
.all_dep {
	background-color: #ffffff;
	padding: 10px;
	text-align: center;
}
.dep_item {
	width: 100%;
	padding: 10px;
	background-color: #e8f1f8;
}
.dep_item_detail {
	/* margin: 10px;*/
	padding: 10px;
	border-radius: 5px;
	background-color: #ffffff;
	position: relative;
	margin-bottom: 10px;
	/* border-bottom: 1px solid #e8f1f8;*/
	.dep_name {
		font-size: 14px;
		margin-bottom: 10px;
	}
	.dep_sort {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 13px;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
	.dep_btm {
		display: flex;
		justify-content: flex-end;
		font-size: 12px;
		.btm_item {
			display: flex;
			align-items: center;
			img {
				height: 15px;
				width: 15px;
				margin-right: 5px;
			}
		}
	}
}
</style>
